<template>
	<view class="confirm">
		<navbar title='确认订单' height="456rpx"
			background='linear-gradient(180deg, rgba(68, 212, 168, 0.6) 15%, rgba(255, 255, 255, 0.5) 85%)'></navbar>
		<view class="customContent" :style="{top: isH5 ? '140rpx' : `${74 + statusBarHeight}px`}">
			<!-- 医师预约 -->
			<view v-if="orderType=='ysAppoint'">
				<panel>
					<view class="personal">
						<view class="left">
							<view class="name">
								<text>张先生</text>13514234123
							</view>
							<view class="address">广东省东莞市东城街道君豪商业中心</view>
						</view>
						<view class="right">
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
					</view>
				</panel>
				<panel>
					<view class="order">
						<view class="item">
							<view class="item-left">
								<image src="/static/images/serve-default.png"></image>
							</view>
							<view class="item-right">
								<view class="item-title">60分钟肩颈疏通+艾灸</view>
								<view class="item-order">
									<view>60分钟</view>
									<view>医师</view>
								</view>
								<view class="item-price">
									<text>￥</text>288
								</view>
							</view>
						</view>
					</view>
				</panel>
				<panel>
					<view class="time" @tap="$refs.appointmentTime.open()">
						<view class="left">预约时间</view>
						<view class="right">
							09-12[周四] 12:00-2:00
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
					</view>
				</panel>
				<panel>
					<view class="time">
						<view class="left">人数</view>
						<view class="right">
							<u--input placeholder="请输入" border="none" inputAlign='right'></u--input>
							<text class="number">人</text>
						</view>
					</view>
				</panel>
				<panel>
					<view class="label">
						<u--form :model="model" :rules="rules" ref="uForm">
							<u-form-item label="个人情况说明" prop="remarks" labelWidth="120" labelPosition="top">
								<u--textarea v-model="model.remarks" placeholder="具体情况说明" count
									maxlength="200"></u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</panel>
			</view>
			<view v-if="orderType=='tgAppoint'">
				<panel>
					<view class="itemDiv" @tap="goto('pages/home/course/organization')">
						<image src="/static/images/zfb.png" mode=""></image>
						<view class="rightCon">
							<view class="one">
								<view class="type">
									<text>分类一</text>
								</view>
								<text class="fontWeight">肩颈按摩手法技巧</text>
							</view>
							<view class="rightP">
								<text class="greyP">东莞市南城街道黄金路A栋1001号</text>
							</view>
							<view class="two">
								<text>2025-8-21 18:00</text>
								<view class="price">
									<text>￥</text>
									<text class="priceNumber">280.00/人</text>
								</view>
							</view>
						</view>
					</view>
				</panel>
				<panel>
					<view class="time" @tap="$refs.appointmentTime.open()">
						<view class="left">预约时间</view>
						<view class="right">
							09-12[周四] 12:00-2:00
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>
					</view>
				</panel>
				<panel>
					<view class="time">
						<view class="left">人数</view>
						<view class="right">
							<u--input placeholder="请输入" border="none" inputAlign='right'></u--input>
							<text class="number">人</text>
						</view>
					</view>
				</panel>
				<panel>
					<view class="label">
						<u--form :model="model" :rules="rules" ref="uForm">
							<u-form-item label="备注" prop="remarks" labelWidth="120" labelPosition="top">
								<u--textarea v-model="model.remarks" placeholder="其他情况说明" count
									maxlength="200"></u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</panel>
			</view>
			<panel>
				<view class="coupon" @tap="$refs.couponPop.open()">
					<view class="left">优惠券</view>
					<view class="right">
						-￥30
						<u-icon name="arrow-right" size="14"></u-icon>
					</view>
				</view>
			</panel>
			<panel>
				<view class="pay">
					<view class="method">
						<view class="left">
							支付方式
						</view>
						<view class="current">
							<image src="/static/images/ye.png"></image>
							<text class="title">钱包支付</text>
							<u-icon name="arrow-down" size="14"></u-icon>
						</view>
					</view>
					<u-radio-group v-model="pay_method">
						<view class="pay-list">
							<view class="item">
								<view class="left">
									<image src="/static/images/ye.png"></image>
									<text class="title">钱包支付</text>
									<text class="other">当前余额￥238.50</text>
								</view>
								<view class="right">
									<u-radio activeColor="green" name="ye"></u-radio>
								</view>
							</view>
							<view class="item">
								<view class="left">
									<image src="/static/images/wechat.png"></image>
									<text class="title">微信支付</text>
									<text class="other">当前余额￥238.50</text>
								</view>
								<view class="right">
									<u-radio activeColor="green" name="wechat"></u-radio>
								</view>
							</view>
							<view class="item">
								<view class="left">
									<image src="/static/images/zfb.png"></image>
									<text class="title">支付宝支付</text>
									<text class="other">当前余额￥238.50</text>
								</view>
								<view class="right">
									<u-radio activeColor="green" name="zfb"></u-radio>
								</view>
							</view>
						</view>
					</u-radio-group>
				</view>
			</panel>
			<view class="bottom">
				<view class="left">
					<view class="price">应付金额￥<text>59.8</text></view>
					<view class="coupon">优惠券-￥30</view>
				</view>
				<view class="right" @click="handleClickConfirm">立即支付</view>
			</view>
			<appointmentTime ref="appointmentTime"></appointmentTime>
			<couponPop ref="couponPop"></couponPop>
		</view>
	</view>
</template>

<script>
	import couponPop from './components/couponPop.vue';
	import navMixin from "@/mixin/navMixin.js"
	export default {
		mixins: [navMixin],
		components: {
			couponPop
		},
		data() {
			return {
				//备注： tgAppoint 团购预约订单   ysAppoint 预约订单
				orderType: "tgAppoint",
				appointment_time_show: false,
				model: {
					remarks: ""
				},
				rules: [],
				pay_method: "wechat", //支付方式
			};
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm?.setRules(this.rules)
		},
		onLoad() {

		},
		methods: {
			handleClickConfirm() {
				this.goto('pages/public/paySuccess')
			}
		}
	}
</script>

<style lang="scss" scoped>

	.customContent {
		position: relative;
		z-index: 99;
	}

	.confirm {
		position: relative;
		width: 100%;
		height: 100%;
		// padding-bottom: 160rpx;

		.label {
			::v-deep .u-form-item__body {
				padding: unset;
			}

			::v-deep .u-form-item__body__left__content__label {
				// color:red !important;
				margin-bottom: 24rpx;
			}
		}

		.personal {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				flex: 1;

				.name {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(96, 98, 113, 1);

					text {
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						margin-right: 24rpx;
					}
				}

				.address {
					margin-top: 12rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(96, 98, 113, 1);
				}
			}

			.right {}
		}

		.order {
			.item {
				display: flex;
				background-color: #FFF;
				border-radius: 24rpx;
				overflow: hidden;

				.item-left {
					image {
						margin-right: 16rpx;
						width: 128rpx;
						height: 128rpx;
					}
				}

				.item-right {
					position: relative;
					flex: 1;

					.item-title {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(54, 68, 79, 1);
					}

					.item-order {
						margin-top: 8rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(94, 103, 110, 1);
						display: flex;

						>view {
							margin-right: 24rpx;
						}
					}

					.item-price {
						margin-top: 12rpx;
						font-size: 28rpx;
						font-weight: 500;
						letter-spacing: 0rpx;
						line-height: 37.12rpx;
						color: rgba(255, 140, 64, 1);

						>text {
							font-size: 20rpx;
						}
					}

				}
			}
		}

		.time {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(54, 68, 79, 1);
			}

			.right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(54, 68, 79, 1);
			}
		}

		.coupon {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(54, 68, 79, 1);
			}

			.right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(255, 140, 64, 1);
			}
		}

		.pay {
			.method {
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(54, 68, 79, 1);
				}

				.current {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(94, 103, 110, 1);

					image {
						width: 58rpx;
						height: 58rpx;

					}

					.title {
						margin: 0 10rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(94, 103, 110, 1);
					}
				}
			}

			.pay-list {
				width: 100%;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 16rpx;

					.left {
						display: flex;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
						}

						.title {
							margin: 0 16rpx 0 18rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(54, 68, 79, 1);
						}

						.other {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(152, 160, 166, 1);
						}
					}
				}
			}
		}

		.bottom {
			position: fixed;
			top: calc(100vh - 170rpx);
			z-index: 100;
			// button: 0;
			left: 0;
			height: 176rpx;
			width: 100%;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 40rpx;

			.left {
				padding-left: 24rpx;

				.price {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(54, 68, 79, 1);
					margin-left: 5rpx;

					>text {
						color: rgba(255, 140, 64, 1);
						font-size: 40rpx;
						font-weight: 600;
					}
				}

				.coupon {
					margin-top: 8rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 140, 64, 1);
				}
			}

			.right {
				border-radius: 24rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFF;
				width: 288rpx;
				height: 88rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $theme-color;
				margin: 24rpx;
			}
		}
	}

	.number {
		margin-left: 8rpx;
	}

	::v-deep .u-textarea {
		background: rgba(246, 248, 252, 1);
		border: none;
		border-radius: 16rpx;
	}

	// 团购预约样式
	.fontWeight {
		font-weight: bold;
	}

	.greyP {
		color: rgba(152, 160, 166, 1);
	}

	.itemDiv {
		display: flex;
		align-items: center;
		font-size: 24rpx;

		image {
			width: 128rpx;
			height: 128rpx;
			border-radius: 16rpx;
		}

		.rightCon {
			margin-left: 16rpx;
			flex: 1;

			.one {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.type {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 68rpx;
					height: 32rpx;
					background: rgba(68, 212, 168, 0.12);
					color: $theme-color;
					margin-right: 4rpx;
					font-size: 20rpx;
				}
			}

			.rightP {
				margin: 8rpx 0;
			}

			.two {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					display: flex;
					font-size: 20rpx;
					color: rgba(255, 140, 64, 1);
					font-weight: 500;
					line-height: 0;

					.priceNumber {
						font-size: 28rpx;
					}
				}

			}
		}
	}
</style>